.login-wrapper {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('../../assets/images/bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;

  .login-form {
    width: 1000px;
    height: 400px;
    display: flex;
    align-items: center;
  }

  .banner-wrapper {
    width: 600px;

    .carousel-img {
      width: 100%;
      height: 400px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;

      &.first {
        background-image: url('../../assets/login/wendang.png');
      }

      &.two {
        background-image: url('../../assets/login/kehu.png');
      }

      &.three {
        background-image: url('../../assets/login/wenjian.png');
      }

      &.last {
        background-image: url('../../assets/login/lianjie.png');
      }
    }
  }

  .form-wrapper {
    width: 400px;
    height: 100%;
    padding: 16px 16px 0 16px;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .login-logo {
      width: 100%;
      font-family: HYGangYiTi-HEW;
      font-weight: 700;
      font-size: 30px;
      color: #ffffff;
      letter-spacing: 0.5px;
      text-align: center;
      margin-bottom: 18px;

      img {
        width: 100%;
      }
    }

    .tip {
      width: 100%;

      h4 {
        font-weight: 600;
        font-size: 18px;
        color: #fff;
      }

      p {
        width: 100%;
        color: #fff;
        line-height: 28px;
      }
    }
  }
  .dotsClass {
    li {
      button {
        background-color: #8c8c8c;
        opacity: 1;
      }
      &.slick-active {
        button {
          opacity: 1;
          background-color: #1677ff;
        }
      }
    }
  }
}